{% extends "layout.html" %}

{% block title %}影视资源管理{% endblock %}
{% block page_title %}影视资源管理{% endblock %}
{% block css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    /* 管理页面整体样式 */
    .admin-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eaeaea;
    }
    
    .admin-title {
        font-size: 28px;
        color: #333;
        margin: 0;
        font-weight: 600;
    }
    
    .admin-subtitle {
        color: #666;
        margin-top: 5px;
    }

    /* 表格样式 */
    .admin-table-container {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        margin-top: 20px;
    }
    
    .admin-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .admin-table th, .admin-table td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    
    .admin-table th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #333;
        position: sticky;
        top: 0;
    }
    
    .admin-table tr:hover {
        background-color: #f5f9ff;
    }
    
    .admin-table tr:last-child td {
        border-bottom: none;
    }
    
    /* 按钮样式 */
    .admin-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 500;
        color: white;
        background-color: #4a6cf7;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .admin-button:hover {
        background-color: #3a5ce4;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .admin-button i {
        margin-right: 8px;
    }
    
    .admin-button-success {
        background-color: #38b653;
    }
    
    .admin-button-success:hover {
        background-color: #2ea346;
    }
    
    .admin-button-danger {
        background-color: #f44336;
    }
    
    .admin-button-danger:hover {
        background-color: #e53935;
    }
    
    .admin-button-sm {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    /* 状态标签 */
    .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 500;
    }
    
    .status-active {
        background-color: #e6f7ee;
        color: #38b653;
    }
    
    .status-inactive {
        background-color: #fff1f1;
        color: #f44336;
    }
    
    /* 操作按钮区域 */
    .action-buttons {
        display: flex;
        gap: 10px;
    }
    
    /* 弹窗样式 */
    .admin-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        backdrop-filter: blur(3px);
    }
    
    .admin-modal-content {
        background-color: white;
        margin: 5% auto;
        padding: 30px;
        border-radius: 10px;
        width: 80%;
        max-width: 600px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        animation: modalFadeIn 0.3s;
    }
    
    @keyframes modalFadeIn {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .admin-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .admin-modal-title {
        font-size: 22px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }
    
    .admin-modal-close {
        font-size: 24px;
        color: #999;
        cursor: pointer;
        transition: color 0.2s;
    }
    
    .admin-modal-close:hover {
        color: #f44336;
    }
    
    /* 表单样式 */
    .admin-form-group {
        margin-bottom: 20px;
    }
    
    .admin-form-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
    }
    
    .admin-form-input {
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 6px;
        background-color: #f9f9f9;
        transition: all 0.2s;
    }
    
    .admin-form-input:focus {
        border-color: #4a6cf7;
        background-color: #fff;
        outline: none;
        box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    }
    
    .admin-form-input::placeholder {
        color: #aaa;
    }
    
    .admin-form-textarea {
        min-height: 100px;
        resize: vertical;
    }
    
    .admin-form-checkbox {
        display: flex;
        align-items: center;
    }
    
    .admin-form-checkbox input {
        margin-right: 10px;
        width: 18px;
        height: 18px;
    }
    
    .truncate-text {
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }
    
    .truncate-text:hover::after {
        content: attr(data-full-text);
        position: absolute;
        left: 0;
        top: 100%;
        background-color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 10;
        white-space: normal;
        width: max-content;
        max-width: 300px;
        font-size: 13px;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .admin-table-container {
            overflow-x: auto;
        }
        
        .admin-modal-content {
            width: 95%;
            padding: 20px;
        }
        
        .admin-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .admin-button {
            margin-top: 15px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <div>
            <h1 class="admin-title">影视资源管理</h1>
            <p class="admin-subtitle">管理系统影视资源库</p>
        </div>
        <button id="addMovieBtn" class="admin-button admin-button-success">
            <i class="fas fa-plus"></i> 添加资源
        </button>
    </div>
    
    <div class="admin-table-container">
        <table class="admin-table" id="moviesTable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>描述</th>
                    <th>URL</th>
                    <th>播放URL</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for movie in movies %}
                <tr>
                    <td>{{ movie.id }}</td>
                    <td>{{ movie.name }}</td>
                    <td>{{ movie.desc }}</td>
                    <td class="truncate-text" data-full-text="{{ movie.url }}">{{ movie.url }}</td>
                    <td class="truncate-text" data-full-text="{{ movie.play_url }}">{{ movie.play_url }}</td>
                    <td>
                        <span class="status-badge {% if movie.is_active %}status-active{% else %}status-inactive{% endif %}">
                            {{ "激活" if movie.is_active else "禁用" }}
                        </span>
                    </td>
                    <td>{{ movie.created_at }}</td>
                    <td>
                        <div class="action-buttons">
                            <button class="admin-button admin-button-sm edit-movie" data-id="{{ movie.id }}">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="admin-button admin-button-sm admin-button-danger delete-movie" data-id="{{ movie.id }}">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- 添加/编辑资源弹窗 -->
    <div id="movieModal" class="admin-modal">
        <div class="admin-modal-content">
            <div class="admin-modal-header">
                <h2 id="modalTitle" class="admin-modal-title">添加影视资源</h2>
                <span class="admin-modal-close">&times;</span>
            </div>
            
            <form id="movieForm">
                <input type="hidden" id="movieId">
                
                <div class="admin-form-group">
                    <label class="admin-form-label" for="name">资源名称</label>
                    <input type="text" id="name" name="name" class="admin-form-input" required placeholder="输入资源名称">
                </div>
                
                <div class="admin-form-group">
                    <label class="admin-form-label" for="desc">描述</label>
                    <textarea id="desc" name="desc" class="admin-form-input admin-form-textarea" placeholder="输入资源描述"></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label class="admin-form-label" for="url">资源URL</label>
                    <input type="url" id="url" name="url" class="admin-form-input" required placeholder="输入资源URL地址">
                </div>
                
                <div class="admin-form-group">
                    <label class="admin-form-label" for="play_url">播放器URL</label>
                    <input type="url" id="play_url" name="play_url" class="admin-form-input" placeholder="输入播放器URL地址">
                </div>
                
                <div class="admin-form-group admin-form-checkbox">
                    <input type="checkbox" id="is_active" name="is_active">
                    <label class="admin-form-label" for="is_active">资源激活</label>
                </div>
                
                <button type="submit" class="admin-button admin-button-success">
                    <i class="fas fa-save"></i> 保存
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('movieModal');
        const closeBtn = document.querySelector('.admin-modal-close');
        const addMovieBtn = document.getElementById('addMovieBtn');
        const form = document.getElementById('movieForm');
        const modalTitle = document.getElementById('modalTitle');
        const movieId = document.getElementById('movieId');
        
        // 打开添加资源弹窗
        addMovieBtn.addEventListener('click', function() {
            modalTitle.textContent = '添加影视资源';
            form.reset();
            movieId.value = '';
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        });
        
        // 关闭弹窗
        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto'; // 恢复滚动
        });
        
        // 点击弹窗外部关闭
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            }
        });
        
        // 编辑资源
        document.querySelectorAll('.edit-movie').forEach(button => {
            button.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                modalTitle.textContent = '编辑影视资源';
                
                // 获取资源数据
                fetch(`/admin/movies/get/${id}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const movie = data.movie;
                            movieId.value = movie.id;
                            document.getElementById('name').value = movie.name;
                            document.getElementById('desc').value = movie.desc || '';
                            document.getElementById('url').value = movie.url || '';
                            document.getElementById('play_url').value = movie.play_url || '';
                            document.getElementById('is_active').checked = movie.is_active;
                            
                            modal.style.display = 'block';
                            document.body.style.overflow = 'hidden';
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('获取资源信息失败。');
                    });
            });
        });
        
        // 删除资源
        document.querySelectorAll('.delete-movie').forEach(button => {
            button.addEventListener('click', function() {
                const id = this.getAttribute('data-id');
                
                if (confirm('确定要删除此影视资源吗？此操作不可撤销。')) {
                    fetch(`/admin/movies/delete/${id}`, {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(data.message);
                            location.reload();
                        } else {
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('删除资源失败。');
                    });
                }
            });
        });
        
        // 保存资源
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const id = movieId.value;
            
            // 处理复选框的值
            const isActive = form.querySelector('input[name="is_active"]').checked;
            formData.set('is_active', isActive ? 'true' : 'false');
            
            const url = id ? `/admin/movies/update/${id}` : '/admin/movies/create';
            
            submitForm(form.id, url);
        });
    });

    function submitForm(formId, url) {
        const form = document.getElementById(formId);
        const formData = new FormData(form);
        
        // 处理复选框的值
        const isActive = form.querySelector('input[name="is_active"]').checked;
        formData.set('is_active', isActive ? 'true' : 'false');
        
        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('操作成功！');
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                alert('操作失败，请重试');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
</script>
{% endblock %} 